自我挑戰的第四天，這個系列文章會專注在寫網頁相關的相關喃喃自語

Day4: 工具提示框 (Tooltips)

• 提供User額外的資訊 (大部分不是第一順位要展示給使用者的內容，但是是有用的內容)。
• 網頁上通常用在當滑鼠hover到一個元件上面時，會自動跳出來。
• 有時會用來強調User已經做完的動作，或是額外說明更進一步的資訊 (例如:提供icon的描述)。
• 不要用來顯示重要的資訊，User可能沒滑過就沒看到了。
• 寬度盡量短內容精簡，並且不要用有透明度的背景。
• 通常會用在Icon, text link, button, image。

本次的例子有：

• Figma介面右下角的問號icon，滑鼠移上去顯示了這個icon的補充說明。
  

• Google Drive右上角的icon，這邊要注意的是，當一個icon有tooltip的時候，旁邊的icon不能沒有，這樣會喪失一致性，並且讓User困惑。
  

可以看到相鄰一組的icon都有自己補充說明的tooltip長出來。

另外的例子還有

• google搜尋列的tooltip。
  

關於tooltips我曾經遇到的問題:

有一次我用bootstrap的tooltip時，怎麼樣tooltip就是出不來（崩潰），後來發現是因為我是在跳出的視窗裡面的icon上加上tooltip，因此會有z-index的問題，後來手動把tooltip的z-index修正成大一點才解決這個問題。

另外有一種比較大的tooltip(甚至是有步驟性的補充說明或是有互動需求)，我覺得比較接近於popover，之後會再寫一篇文章說明。

這篇文章就專注在小而精簡的tooltips!

一樣是可以直接用的其他資源補充:

• Bootstrap的Tooltips
• Bootstrap(React版本)的Tooltips
• Material UI(React版本)的Tooltips